<script setup>
function div1Handler() {
    console.log('这是触发了 inner div 的点击事件')
}

function btnHandler() {
    console.log('这是触发了 btn 按钮的点击事件')
}

function linkClick() {
    console.log('这是触发了链接的点击事件')
}
</script>

<template>
    <div class="outer">
        <div class="inner" @click="div1Handler">
            <input type="button" value="点击1" @click="btnHandler">
            <!-- 阻止事件冒泡 Event Bubble -->
            <input type="button" value="点击2" @click.stop="btnHandler">
        </div>
    </div>

    <hr>

    <div class="inner">
        <a href="https://www.baidu.com" v-on:click="linkClick">有问题，百度一下</a>
        <!-- 组织事件的默认行为 -->
        <a href="https://www.baidu.com" v-on:click.prevent="linkClick">有问题，百度一下</a>
    </div>

    <hr>
    <div class="outer">
        <div class="inner" @click="div1Handler">
            <input type="button" value="点击1" @click="btnHandler">
        </div>

        <br>

        <!--使用事件的捕获模式-->
        <div class="inner" @click.capture="div1Handler">
            <input type="button" value="点击2" @click="btnHandler">
        </div>
    </div>

    <div class="outer">
        <div class="inner" @click="div1Handler">
            <input type="button" value="点击1" @click="btnHandler">
        </div>

        <br>

        <!--只有event.target是当前操作的元素时才触发事件；-->
        <div class="inner" @click.self="div1Handler">
            <input type="button" value="点击2" @click="btnHandler">
        </div>
    </div>


    <div class="inner">
        <a href="https://www.baidu.com" v-on:click="linkClick">有问题，百度一下</a>
        <!--阻止默认行为只有效了一次-->
        <a href="https://www.baidu.com" v-on:click.prevent.once="linkClick">有问题，百度一下</a>
    </div>
</template>

<style lang="css" scoped>
.inner {
    height: 150px;
    background-color: gold;
}

.outer {
    padding: 40px;
    background-color: red;
}
</style>